<template>
    <div class="paynotification-cmbcpaysucc" v-show='isShow'>
      <div v-if='payState' class="pay-cmbc">
          <div class="pay-succ-box">
              <img src='../../assets/imgs/icon-success.png' />
              <span>支付成功</span>
          </div>
          <div class="btn-box">
            <div
              @click='goHome'
              class="btn active">
              继续逛逛
            </div>
            <div
              @click='goOrder'
              class="btn">
              查看订单
            </div>
          </div>
      </div>
      <div v-else class="pay-cmbc pay-cmbc-error">
          <div class="pay-succ-box">
              <img src='../../assets/imgs/icon-error.png' />
              <span>支付失败</span>
              <span class="question">如有疑问请联系客服</span>
              <a class='tel' href="tel://4006666666">400 666 6666</a>
          </div>
          <div class="btn-box">
            <div
              @click='goBack'
              class="btn active go-back">
              返回
            </div>
          </div>
      </div>
    </div>
</template>
<script type="text/javascript">
  import utils from '@/util/util';
  import Api from '@/util/api';
  export default {
    data(){
      return {
        orderId:0,
        isShow:false,
        taskNum:5,
        payState:"PAY"
      }
    },
    mounted(){
      window.utils = utils;
      var {orderId} = this.$route.query;
      this.orderId = orderId;
      this.query();
      window.loginCallBack = (token)=>{
        this.loginCallBack(token);
      }
      window.paymentSuccess = ()=>{
        return this.paymentSuccess();
      }
    },
    methods:{
      query(){
        this.loading("查询中...");
        if(utils.isNativeApp() || utils.isWxPlus()){
          var token = utils.getUserToken();
          if(token){
            this.queryTask(token);
          }else{
            window.utils = utils;
          }
        }else{
          var userInfo = utils.getUserInfo();
          if(userInfo){
            this.queryTask(userInfo.token);
          }else{
            this.$vux.loading.hide();
            this.$router.push("/login");
          }
        }
      },
      goHome(){
        if(utils.goIndex()){
          this.$router.go(-1);
        }
      },
      goOrder(){
        var orderId = this.orderId;
        if(utils.goOrder(orderId)){
          this.$router.push(`/order-info?id=${orderId}`);
        }
      },
      goBack(){
        if(utils.goBack()){
          this.$router.go(-1);
        }
      },
      loginCallBack(token){
        this.loading("查询中...");
        this.queryTask(token);
      },
      queryTask(token){
        var orderId = this.orderId;
        this.post(Api.orderGetOrder,{id:orderId},{token})
        .then((d)=>{
          if(d.code == 200){
            var payState = d.data.state;
            if(payState == "UNPAY" && this.taskNum>0){
              this.taskNum -=1;
              setTimeout(()=>{
                this.queryTask(token);
              },1000);
            }else{
              if(payState == "WAITSEND" || payState == "PAY"){
                this.payState = true;
              }else{
                this.payState = false;
              }
              this.$vux.loading.hide();
              this.isShow = true;
            }
          }else{
            this.$vux.loading.hide();
          }
        })
        .catch((e)=>{
          this.$vux.loading.hide();
          this.toast("网络错误，查询失败");
          this.goHome();
        })
      },
      paymentSuccess(){
        return this.payState;
      }
    }
  }
</script>
<style lang='less' rel='stylesheet/less'>
  @import '../styles/theme.less';
  .paynotification-cmbcpaysucc{
    background-color: #f2f2f2;
    height: 100vh;
    .pay-cmbc{
      height:4.84rem;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      justify-content: space-between;
      padding-bottom: .6rem;
      padding-top: .3rem;
      &.pay-cmbc-error{
        height: 5.8rem;
      }
      .pay-succ-box{
        display: flex;
        height: 3rem;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        img{
          width: 1.2rem;
          height: 1.2rem;
        }
        span{
          color: #464646;
          font-size: .32rem;
          margin-top: .2rem;
        }
        .question{
          color: #909090;
          font-size: @font-rl;
          font-size: .28rem;
        }
        .tel{
          color: #4C99FF;
          text-decoration: none;
        }
      }
    }

    .btn-box{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 0 .3rem;
      height: 1rem;
      margin-top: .2rem;
      .btn{
        width: 3.3rem;
        height: 100%;
        border-radius: .08rem;
        border:.01rem solid #BCBCBC;
        text-align: center;
        line-height: 1rem;
        font-size: @font-rl;
        &.active{
          background-color: #FBC200;
          border:.01rem solid #FBC200;
        }
        &.go-back{
          width: 6.9rem;
        }
      }
    }
  }
</style>
